<template>
  <div class="My">
    <!-- <van-nav-bar left-arrow title="个人中心" @click-left="backHome"></van-nav-bar> -->
    <nav-bar :title="'个人中心'"></nav-bar>
    <div class="My-wrap">
      <div class="My-login">
        <a href="javacript:;">
          <img :src="userInfo.headImg? imgUrl+userInfo.headImg:loginPng" alt />
        </a>
        <div class="My-login-right">
          <div class="username">{{userInfo.userName}}</div>
          <div class="status">
            <!-- <img src="../assets/img/my/person-icon.png" alt=""> -->
            <van-icon
              name="manager"
              size="18"
              :color="userInfo.vipType == '0'? '#969799':'#0050a5'"
              :style="{verticalAlign: 'bottom'}"
            />
            <span>{{userInfo.vipType == '0'? '普通用户':userInfo.vipType}}</span>
          </div>
        </div>
      </div>
      <div class="My-vip">
        <a href="javascript:;" @click="applyVip()"></a>
      </div>
      <div class="my-icon-list">
        <div class="item" @click="skipRouter({path:'/applyRecord'})">
          <img class="icon" src="../assets/img/zuopin.png" alt />
          <div class="title">档案申报</div>
        </div>
        <div class="item" @click="skipRouter({path:'/myShenbao'})">
          <img class="icon" src="../assets/img/jiangxiang.png" alt />

          <div class="title">奖项申报</div>
        </div>
        <div class="item" @click="handMyActiv()">
          <img class="icon" src="../assets/img/xiehuihd.png" alt />

          <div class="title">我的活动</div>
        </div>
        <div class="item" @click="handColl">
          <img class="icon" src="../assets/img/shoucang.png" alt />

          <div class="title">我的收藏</div>
        </div>
      </div>
      <div class="My-menu">
        <van-cell-group>
          <van-cell value="报名的活动" @click="skipRouter({path:'/myActivityList'})" is-link>
            <template #icon>
              <!-- <img class="My-menu-icon" src="../assets/img/my/activity.png" alt /> -->
            </template>
          </van-cell>
          <van-cell value="档案申报" @click="skipRouter({path:'/applyRecord'})" is-link>
            <template #icon>
              <!-- <img class="My-menu-icon" src="../assets/img/my/person-file.png" alt /> -->
            </template>
          </van-cell>
          <van-cell value="发布者信息" @click="handFb()" is-link>
            <template #icon>
              <!-- <img class="My-menu-icon" src="../assets/img/my/person-file.png" alt /> -->
            </template>
          </van-cell>
          <van-cell value="我的信息" @click="handXX()" is-link>
            <template #icon>
              <!-- <img class="My-menu-icon" src="../assets/img/my/person-file.png" alt /> -->
            </template>
          </van-cell>
          <!-- <van-cell value="企业档案" is-link  url="/#/companyList">
            <template #icon>
              <img class="My-menu-icon" src="../assets/img/my/company-file.png" alt="">
            </template>
          </van-cell>-->
          <!-- <van-cell value="申报查询" is-link>
            <template #icon>
              <img class="My-menu-icon" src="../assets/img/my/search.png" alt="">
            </template>
          </van-cell>
          <van-cell value="关于我们" is-link>
            <template #icon>
              <img class="My-menu-icon" src="../assets/img/my/about.png" alt="">
            </template>
          </van-cell>-->
          <van-cell value="退出登陆" is-link @click="logOut()">
            <template #icon>
              <!-- <img class="My-menu-icon" src="../assets/img/my/logout.png" alt /> -->
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import loginPng from '../assets/img/my/login.png'
import navBar from '@/components/NavBar'
export default {
  components: {
    navBar,
  },
  name: 'My',
  data() {
    return {
      imgUrl: config.imgUrl,
      loginPng: loginPng,
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    handFb() {
      this.$router.push('fabuzhe')
    },
    handXX() {
      this.$router.push('myXX')
    },
    handMyActiv() {
      this.$router.push('myActiv')
    },
    handColl() {
      this.$router.push('myCollect')
    },
    skipRouter(routerObj) {
      this.$router.push(routerObj)
    },
    backHome() {
      this.$router.back()
    },
    logOut() {
      this.$store.dispatch('setUserInfo', '')
      this.$router.push({
        path: '/',
      })
    },
    applyVip() {
      if (!this.userInfo) {
        this.$router.push({ path: '/notice' })
        return
      }
      this.$request
        .post('/vip/selectMyVip', {
          page: 1,
          pageSize: 10,
          userCode: this.userInfo.userCode,
        })
        .then((rsp) => {
          console.log(rsp)
          if (rsp.code === 200) {
            let vip = rsp.data.list[0]
            if (vip) {
              if (
                vip.status === '0' ||
                vip.status === '1' ||
                vip.status === '2'
              ) {
                this.$router.push({ path: '/vipAudit' })
              } else {
                this.$router.push({ path: '/vipAuthentication' })
              }
            } else {
              this.$router.push({ path: '/notice' })
            }
          } else {
            this.$message.error(rsp.data.content)
          }
        })
    },
  },
  mounted() {
    console.log(this.userInfo)
  },
}
</script>

<style lang='scss'>
@import '../assets/css/base';
.My {
  font-size: px2rem(24);
  .my-icon-list {
    padding: px2rem(22) px2rem(16);
    background: #ffffff;
    box-shadow: 0 0 13px 0 rgba(18, 27, 83, 0.07);
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    .item {
      text-align: center;
      .title {
        font-size: px2rem(26);
        color: #333;
      }
    }
    .icon {
      width: 34px;
      height: 34px;
    }
  }
  &-wrap {
    width: px2rem(690);
    margin: 0 auto;
  }
  &-login {
    display: flex;
    margin: px2rem(42) auto px2rem(30);
    & > a {
      display: block;
      margin-right: px2rem(20);
      & > img {
        width: px2rem(128);
        height: px2rem(128);
        border-radius: 50%;
      }
    }
    &-right {
      & > .username {
        color: $mainColor;
        font-size: px2rem(36);
        margin-top: px2rem(30);
        margin-bottom: px2rem(26);
      }
      & > .status {
        & > img {
          width: px2rem(32);
          height: px2rem(32);
        }
        & > span {
          padding-left: px2rem(15);
          color: rgba(0, 0, 0, 0.5);
        }
      }
    }
  }
  &-vip {
    @include bgImg(
      px2rem(690),
      px2rem(140),
      '../assets/img/my/vip-bg.png',
      cover
    );
    position: relative;
    border-radius: px2rem(10);
    & > a {
      @include bgImg(
        px2rem(154),
        px2rem(42),
        '../assets/img/my/vip-btn.png',
        cover
      );
      border-radius: px2rem(20);
      position: absolute;
      right: px2rem(30);
      bottom: px2rem(30);
    }
  }
  &-menu {
    margin-top: px2rem(34);
    box-shadow: 0 0 13px 0 rgba(18, 27, 83, 0.07);
    &-icon {
      width: px2rem(45);
      height: px2rem(45);
      display: inline-block;
      margin-right: px2rem(10);
    }
  }
}
</style>
